<template>
	<view class="container">
		<uni-forms ref="formRef" :rules="formRules" v-model="formData">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="formData.name" placeholder="请输入姓名" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="年龄" name="age">
				<uni-easyinput v-model="formData.age" placeholder="请输入年龄" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="sex">
				<uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required name="phone">
				<uni-easyinput v-model="formData.phone" placeholder="请输入手机号" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="身份证号" required name="idNumber">
				<uni-easyinput v-model="formData.idNumber" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="户籍地址" required name="address">
				<uni-easyinput v-model="formData.address" :inputBorder="false" placeholder="请输入户籍地址" />
			</uni-forms-item>
			<uni-forms-item label="工作单位" name="unit">
				<uni-easyinput v-model="formData.unit" :inputBorder="false" placeholder="请输入工作单位" />
			</uni-forms-item>
			<uni-forms-item label="所属乡镇" required name="villages">
				<uni-easyinput v-model="formData.villages" :inputBorder="false" placeholder="请输入所属乡镇" />
			</uni-forms-item>
			<uni-forms-item label="所属行业" required name="industry">
				<uni-easyinput v-model="formData.industry" :inputBorder="false" placeholder="请输入所属行业" />
			</uni-forms-item>
			<uni-forms-item label="预约日期" required name="createTime">
				<uni-datetime-picker type="date" return-type="date" v-model="formData.createTime" :border="false"
					@change="dateChange" :clear-icon="false" :disabledDate="disabledDate" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" class="btn-fixed-bottom" @tap="handlePerBook">提交</button>
	</view>
</template>

<script>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		addBook
	} from '@/api/book.js'
	import {
		formateDate
	} from '@/utils/formatDate.js'
	import {
		holidayList
	} from '@/api/holiday.js'
	import {
		useRoute
	} from 'vue-router'
	export default {
		onLoad(option) {
			this.formData.idNumber = option.idNumber
			this.formRef = this.$refs.formRef
			this.getHolidayList()
		},
		data() {
			return {
				formData: {
					name: '',
					age: '20',
					sex: '男',
					phone: '',
					idNumber: '',
					unit: '',
					villages: '',
					address: '',
					industry: '',
					createTime: ''
				},
				sexs: [{
						text: '男',
						value: '男'
					},
					{
						text: '女',
						value: '女'
					},
				],
				formRef: null,
				formRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '户籍地址不能为空'
						}]
					},
					villages: {
						rules: [{
							required: true,
							errorMessage: '所属乡镇不能为空'
						}]
					},
					createTime: {
						rules: [{
							required: true,
							errorMessage: '预约日期不能为空'
						}]
					},
				},
				selectDate: '',
				disabledDate: [],

			}
		},
		methods: {
			async getHolidayList() {
				const {
					data
				} = await holidayList()
				this.disabledDate = data
			},
			// 日期选择
			dateChange(value) {
				this.selectDate = formateDate(value, 'yyyy-MM-dd')
				this.formRef.setValue('createTime', this.selectDate)
			},
			// 提交预约
			handlePerBook() {
				this.formRef.setValue('createTime', this.selectDate)
				this.formRef.validate().then(async res => {
					const {
						data
					} = await addBook(res)
					console.log(data)
					this.formRef.resetFields()
					uni.navigateTo({
						url: `/pages/personBook/perBookList?idNumber=${res.idNumber}`
					})
					uni.showToast({
						title: '预约成功',
					})
				}).catch(err => {
					console.log('err', err)
				})
			}
		}
		// setup() {
		// 	onMounted(() => {
		// 		getHolidayList()
		// 	})
		// 	const formData = reactive({
		// 		name:'',
		// 		age:'20',
		// 		sex:'男',
		// 		phone:'',
		// 		idNumber:'',
		// 		unit:'',
		// 		villages:'',
		// 		address:'',
		// 		industry:'',
		// 		createTime:''
		// 	})
		// 	// 性别单选数据源
		// 	const sexs =  reactive([
		// 		{
		// 			text: '男',
		// 			value: '男'
		// 		}, 
		// 		{
		// 			text: '女',
		// 			value: '女'
		// 		},
		// 	])
		// 	const formRef = ref()
		// 	const formRules = reactive({
		// 		name: {
		// 			rules: [{
		// 				required: true,
		// 				errorMessage: '姓名不能为空'
		// 			}]
		// 		},
		// 		phone: {
		// 			rules: [{
		// 				required: true,
		// 				errorMessage: '手机号不能为空'
		// 			}]
		// 		},
		// 		idNumber: {
		// 			rules: [{
		// 				required: true,
		// 				errorMessage: '身份证号不能为空'
		// 			}]
		// 		},
		// 		address: {
		// 			rules: [{
		// 				required: true,
		// 				errorMessage: '户籍地址不能为空'
		// 			}]
		// 		},
		// 		villages: {
		// 			rules: [{
		// 				required: true,
		// 				errorMessage: '所属乡镇不能为空'
		// 			}]
		// 		},
		// 		createTime: {
		// 			rules: [{
		// 				required: true,
		// 				errorMessage: '预约日期不能为空'
		// 			}]
		// 		},
		// 	})
		// 	const route = useRoute()
		// 	formData.idNumber = route.query.idNumber
		// 	let selectDate = ''

		// 	// 获取节假日列表
		// 	const disabledDate = ref([]) // 禁用日期
		// 	const getHolidayList = async() => {
		// 		const { data } = await holidayList()
		// 		disabledDate.value = data
		// 	}
		// 	// 日期选择
		// 	const dateChange = async(value) => {
		// 		selectDate = formateDate(value, 'yyyy-MM-dd')
		// 		formRef.value.setValue('createTime', selectDate)
		// 	}

		// 	// 提交预约
		// 	const handlePerBook = () => {
		// 		formRef.value.setValue('createTime', selectDate)
		// 		formRef.value.validate().then(async res => {
		// 			const { data } = await addBook(res)
		// 			console.log(data)
		// 			formRef.value.resetFields()
		// 			uni.navigateTo({
		// 				url: `/pages/personBook/perBookList?idNumber=${res.idNumber}`
		// 			})
		// 			uni.showToast({
		// 				title:'预约成功',
		// 			})
		// 		}).catch(err => {
		// 			console.log('err',err)
		// 		})
		// 	}


		// 	return{
		// 		formData,
		// 		formRef,
		// 		formRules,
		// 		handlePerBook,
		// 		sexs,
		// 		disabledDate,
		// 		dateChange
		// 	}
		// }
	}
</script>
<style lang="scss" scoped>
	::v-deep .uni-forms-item__inner {
		border-bottom: 2upx solid #eee;
		padding-bottom: 10upx;
	}
</style>
